<template>
    <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
              :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
              :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
              :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
        <a-form ref="formRef" :model="formState" layout="vertical" :rules="ACCOUNT_WXPAY_EDIT.RULES">
            <a-row :gutter="12">
                <a-col :span="12">
                    <a-form-item label="应用类型" field="appType">


                        <smart-dict :url="DictOptions.AppType" v-model="formState.appType" placeholder="请设置接入微信支付的应用类型" :disabled="isUpdate"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="应用ID" field="appId">
                        <a-input v-model="formState.appId" allow-clear placeholder="请设置接入微信支付应用ID"/>
                    </a-form-item>
                </a-col>

                <a-col :span="12">
                    <a-form-item label="关联商户ID" field="mchId">
                        <a-input v-model="formState.mchId" allow-clear placeholder="请设置接入微信支付的关联商户ID"/>
                    </a-form-item>
                </a-col>


                <a-col :span="12">
                    <a-form-item label="关联商户名称" field="mchName">
                        <a-input v-model="formState.mchName" allow-clear placeholder="请设置接入微信支付的关联商户名称"/>
                    </a-form-item>
                </a-col>


                <a-col :span="24">
                    <a-form-item label="微信支付V3Key" field="v3Key">
                        <a-input v-model="formState.v3Key" :auto-size="{minRows:2 , maxRows:5}" allow-clear placeholder="请设置微信支付的V3秘钥"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="证书内容" field="privateCert">
                        <a-textarea v-model="formState.privateCert" :auto-size="{minRows:2 , maxRows:5}" allow-clear placeholder="请设置证书内容"/>
                    </a-form-item>
                </a-col>


                <a-col :span="12">
                    <a-form-item label="证书秘钥" field="privateKey">
                        <a-textarea v-model="formState.privateKey" :auto-size="{minRows:2 , maxRows:5}" allow-clear placeholder="请设置证书秘钥"/>
                    </a-form-item>
                </a-col>


                <a-col :span="24">
                    <a-form-item label="备注信息" field="description">
                        <a-textarea v-model="formState.description" :auto-size="{minRows:2 , maxRows:5}" allow-clear placeholder="备注信息"/>
                    </a-form-item>
                </a-col>


            </a-row>


        </a-form>
        <!--表单结束-->
    </a-drawer>
</template>

<script lang="ts" setup>

import {EditDrawer} from '@/libs/core'

import {ACCOUNT_WXPAY_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'
import {DictOptions} from "@/libs/options";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addWxpay, updateWxpay} = SystemHttp
const config = {tplRecord: ACCOUNT_WXPAY_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addWxpay).setUpdateRequest(updateWxpay)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改微信支付' : '新建微信支付'
</script>
